﻿@page "/buttons"
@page "/button"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Button
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Button</strong> component.
</RadzenText>

<RadzenText Anchor="buttons#filled-buttons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Filled Buttons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    These are the default Radzen Buttons.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonFilled">
    <ButtonFilled />
</RadzenExample>

<RadzenText Anchor="buttons#filled-buttons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Flat Buttons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Flat"</code> for flat button variant.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonFlat">
    <ButtonFlat />
</RadzenExample>

<RadzenText Anchor="buttons#filled-buttons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Outlined Buttons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Outlined"</code> for outlined button variant.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonOutlined">
    <ButtonOutlined />
</RadzenExample>

<RadzenText Anchor="buttons#filled-buttons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text Buttons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Text"</code> for text button variant.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonText">
    <ButtonText />
</RadzenExample>

<RadzenText Anchor="buttons#filled-buttons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Content in Buttons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Text, icons and images can be added to a button. 
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonContent">
    <ButtonContent />
</RadzenExample>

<RadzenText Anchor="buttons#button-sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Button Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Size</code> property to set button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonSizes">
    <ButtonSizes />
</RadzenExample>

<RadzenText Anchor="buttons#button-sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    FAB
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Floating action button.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonFab">
    <ButtonFab />
</RadzenExample>

<RadzenText Anchor="buttons#button-sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Disabled Button
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable a button.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonDisabled">
    <ButtonDisabled />
</RadzenExample>

<RadzenText Anchor="buttons#button-sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Busy button
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>IsBusy="true"</code> to show the busy indicator.
</RadzenText>
<RadzenExample ComponentName="Button" Example="ButtonBusy">
    <ButtonBusy />
</RadzenExample>